<template>
  <transition name="moveR">
    <div class="singer-detail">
       <dsic-list @select="selectItem" :singer="singer" :songList="songList"></dsic-list>
    </div>
  </transition>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { ERR_OK } from 'api/config'
import { getSingerDisc, getSongVkey } from 'api/singer'
import { createSong } from 'api/song'
import DsicList from 'base/DiscList'
export default {
  name: 'singerDetail',
  components: {
    DsicList
  },
  data() {
    return {
      songList: []
    }
  },
  activated() {
    this.songList = []
    // 进入页面首先判断singer存不存在，不存在的话返回上一个页面
    this._getSingerDisc()
  },
  computed: {
    ...mapGetters([
      'singer'
    ])
  },
  methods: {
    _getSingerDisc() {
      if (!this.singer.id) {
        this.$router.push('/singer')
      }
      var singer = this.singer
      getSingerDisc(singer).then((res) => {
        if (res.data.code === ERR_OK) {
          this.songList = this._resetSonglist(res.data.singer.data.songlist)
        }
      })
    },
    _resetSonglist(list) {
      var ret = []
      list.forEach((item) => {
        getSongVkey(item.mid).then((res) => {
          let vkey = res.data.items[0].vkey
          let url = `http://dl.stream.qqmusic.qq.com/${res.data.items[0].filename}?vkey=${vkey}&guid=7175649092&uin=0&fromtag=66`
          Object.assign(item, { url })
          if (vkey !== '') {
            var song = createSong(item)
            ret.push(song)
          }
        })
      })
      return ret
    },
    selectItem(item, index) {
      this.selectPlay({
        list: [...this.songList],
        index: index
      })
    },
    ...mapActions([
      'selectPlay'
    ])
  }
}
</script>

<style scoped>
  .singer-detail{
    position: absolute;
    top: 0;
    z-index: 2;
    background: white;
    width: 100%;
    height: 100%;
  }
  .moveR-enter-active,  .moveR-leave-active {
    transition: all 0.3s linear;
    transform: translateX(0);
  }
   .moveR-enter,  .moveR-leave {
    transform: translateX(100%);
  }
   .moveR-leave-to{
     transform: translateX(100%);
   }
</style>
